<template>
  <el-form ref="formRef" :model="_form" :rules="rules" label-width="80px" size="small">
    <el-form-item label="父级">
      <el-input v-model.trim="_upName" disabled />
    </el-form-item>
    <el-form-item label="名称" prop="name">
      <el-input v-model.trim="_form.name" placeholder="请输入名称" />
    </el-form-item>
    <el-form-item label="负责人" prop="contact">
      <el-input v-model.trim="_form.contact" placeholder="请输入负责人" />
    </el-form-item>
    <el-form-item label="手机号" prop="phone">
      <el-input v-model.trim="_form.phone" placeholder="请输入手机号" />
    </el-form-item>
    <remark v-model:remark="_form.remark" />
    <el-form-item label="排序号" prop="tier">
      <el-input v-model.number="_form.tier" placeholder="请输入排序号" />
      <!-- <div class="tips">代表组织机构在列表中的显示顺序</div> -->
    </el-form-item>
    <el-form-item prop="enable" label="状态">
      <el-radio-group v-model="_form.enable">
        <el-radio-button :label="true">启用</el-radio-button>
        <el-radio-button :label="false">禁用</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item>
      <drawer-footer :save-loading="saveLoading" @cancel="cancel" @confirm="confirm" />
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { computed, defineEmits, defineExpose, defineProps, reactive, ref, toRefs } from 'vue'

import { ElMessage } from 'element-plus'

import DrawerFooter from '&/components/Drawer/Footer.vue'
import Remark from '&/components/Form/remark.vue'

import DepApi from '@/api/backend/dep'

import { commonContactReg, commonTitleReg, phoneReg } from '@/utils/regExp'

import IBaseObj from '#/index'

const props = defineProps({
  form: {
    type: Object,
    default: () => {},
  },
  isAdd: {
    type: Boolean,
    default: true,
  },
  upName: {
    type: String,
    default: '',
  },
})

const emits = defineEmits(['update:form', 'cancel', 'confirm'])

const rules = {
  name: [
    { required: true, message: '请输入名称', trigger: 'blur' },
    { max: 20, message: '输入长度超过20个字符', trigger: 'blur' },
    { ...commonTitleReg, trigger: 'blur' },
  ],
  phone: [{ ...phoneReg, trigger: 'blur' }],
  contact: [
    { max: 20, message: '输入长度超过20个字符', trigger: 'blur' },
    { ...commonContactReg, trigger: 'blur' },
  ],
}

const state: IBaseObj = reactive({
  saveLoading: false,
})

const { saveLoading } = toRefs(state)

const _form: IBaseObj = computed({
  get() {
    console.log('_form', props.form)
    return props.form
  },
  set(val) {
    emits('update:form', val)
  },
})

const _upName = computed(() => props.upName)

const cancel = () => {
  emits('cancel')
}

const formRef = ref()
const confirm = () => {
  formRef.value.validate(async (valid: Boolean) => {
    if (valid) {
      state.saveLoading = true
      try {
        let res = null

        res = await DepApi.saveDep({ ..._form.value })

        const { status: statusCode } = res
        if (statusCode === 200) {
          if (props.isAdd) {
            ElMessage({ message: '创建成功!', type: 'success', duration: 1500 })
          } else {
            ElMessage({ message: '修改成功!', type: 'success', duration: 1500 })
          }
          emits('confirm')
        }
      } catch (error) {
        console.log(error)
      } finally {
        state.saveLoading = false
      }
    } else {
      return false
    }
  })
}

const clear = () => {
  formRef.value.resetFields()
}

defineExpose({
  clear,
})
</script>

<style lang="scss" scoped>
$primaryColor: var(--color-primary);

.area-wrapper {
  &.closed {
    display: none;
  }

  .header {
    display: flex;
    justify-content: space-between;
  }

  .close {
    color: $primaryColor;
    cursor: pointer;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  li {
    list-style: none;
  }

  .type-list {
    flex: 1;
    display: flex;

    li {
      padding: 0 20px;
      margin-right: 10px;
      color: white;
      cursor: pointer;

      &:hover {
        color: $primaryColor;
      }

      &.selected {
        color: $primaryColor;
        border-bottom: 1px solid currentColor;
      }
    }
  }

  .body {
    ul {
      display: flex;
      flex-wrap: wrap;
    }

    li {
      padding: 0 15px;
      color: white;
      cursor: pointer;

      &:hover {
        color: $primaryColor;
      }
    }
  }
}

.tips {
  font-size: 12px;
  line-height: 20px;
  color: #c4c4c4;
}
</style>
